<template>
  <PageLayout :navbarShow="false">
    <wd-navbar
      title="新建会员"
      left-text="返回"
      left-arrow
      @click-left="handleClickLeft"
      safeAreaInsetTop
    ></wd-navbar>
    <wd-form ref="form" :model="formData">
      <wd-cell-group border>
        会员头像
        <wd-upload
          label=""
          :file-list="fileList"
          :limit="1"
          reupload
          action="/sys/common/upload"
          @change="handleChange"
        ></wd-upload>
        <wd-input
          label="真实姓名"
          label-width="100px"
          prop="realName"
          clearable
          v-model="formData.realName"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <!-- <wd-col-picker
          label="选择地址"
          v-model="formData.province"
          :columns="area"
          :column-change="columnChange"
          @confirm="handleConfirm"
        ></wd-col-picker> -->
        <wd-input
          label="公司名称"
          label-width="100px"
          prop="companyName"
          clearable
          v-model="formData.companyName"
          placeholder="请输入公司名称"
          :rules="[{ required: true, message: '请输入公司名称' }]"
        />
        <wd-input
          label="兴趣爱好"
          label-width="100px"
          prop="interests"
          clearable
          v-model="formData.interests"
          placeholder="请输入兴趣爱好"
        />
        <wd-input
          label="电话号码"
          label-width="100px"
          prop="phone"
          clearable
          v-model="formData.phone"
          placeholder="请输入电话号码"
        />
      </wd-cell-group>
      <view class="footer">
        <wd-button type="primary" ype="datetime" size="large" @click="handleSubmit" block>
          提交
        </wd-button>
      </view>
    </wd-form>
  </PageLayout>
</template>

<script setup>
import { http } from '@/utils/http'
import { ref, reactive } from 'vue'
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
import { onLaunch, onShow, onHide, onLoad, onReady } from '@dcloudio/uni-app'
defineOptions({
  name: 'addMember',
  options: {
    styleIsolation: 'shared',
  },
})

const minDate = ref(Date.now())
const formData = ref({
  realName: '',
  avatar: '',
  province: '',
  companyName: '',
  interests: '',
  phone: '',
})
const area = ref([
  colPickerData.map((item) => {
    return {
      value: item.value,
      label: item.text,
    }
  }),
])
const form = ref()
const columnChange = ({ selectedItem, resolve, finish }) => {
  const areaData = findChildrenByCode(colPickerData, selectedItem.value)
  if (areaData && areaData.length) {
    resolve(
      areaData.map((item) => {
        return {
          value: item.value,
          label: item.text,
        }
      }),
    )
  } else {
    finish()
  }
}

function handleConfirm({ value }) {
  console.log(value)
}

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        console.log(formData.value)
        http.post('/chamber/ccMember/add', formData.value).then((res) => {
          if (res.success) {
            // console.log(res)
            // showData.value = res.result
            uni.switchTab({ url: '/pages/index/index' })
          }
        })
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

const handleChange = async ({ fileList: files }) => {
  formData.value.avatar = 'https://static.jeecg.com/temp/' + JSON.parse(files[0].response).message
}
</script>

<style lang="scss" scoped>
:deep(.wd-navbar) {
  background: linear-gradient(45deg, #0081ff, #1cbbb4);
  height: 50px;
}
</style>
